import { View, Image, Text } from "@tarojs/components";
import "./index.scss";

interface AvatarProps {
  avatar: string;
  username: string;
  descInfo: string; 
  avatarSize?: string;
  onClick?: () => void;
}

function AvatarComponent({
  avatar, 
  username, 
  descInfo,
  avatarSize,
  onClick,
}: AvatarProps) {
  return (
    <View className="avatar-name" onClick={onClick}>
      <Image className={avatarSize === 'big' ? "avatar avatar-big" : avatarSize === 'small' ? 'avatar avatar-small' : "avatar"} src={avatar} mode="aspectFill" webp />
      <View className="welcome">
        <Text className="username">{ username }</Text>
        <Text className="welcome-text"> { descInfo } </Text>
      </View>
    </View>
  )
}

export default AvatarComponent;